<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
        }
        span{
            background-color: green;
        }
        /*设置浮动*/
        .left{
            float: left;
        }
        /*.float-left:after{*/
        /*    content: '';*/
        /*    display: block;*/
        /*    clear: both;*/
        /*}*/
        /*父元素字体大小设为0， 子元素单独设字体大小*/
        .parent{
            font-size: 0;
        }
        .child{
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div>
        <span>大眼包子</span>
        <span>大眼包子</span>
        <span>大眼包子</span>
    </div>

    <div>
        <span>大眼包子</span><span>大眼包子</span><span>大眼包子</span>
    </div>

    <div class="float-left">
        <span class="left">大眼包子</span>
        <span class="left">大眼包子</span>
        <span class="left">大眼包子</span>
    </div>
<!--    <br/>-->

    <div class="parent">
        <span class="child">大眼包子</span>
        <span class="child">大眼包子</span>
        <span class="child">大眼包子</span>
    </div>
</body>
</html>